<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="drawer.show_add = true" class="mr10">
					添加优惠卷
				</el-button>
				<!-- <el-button type="danger" @click="deleteStudentHandle">删除</el-button> -->
			</div>
		</el-header>
		<AddClass v-if="drawer.show_add" @close="drawer.show_add = false" @success="search" />

		<el-main class="nopadding">
			<scTable ref="table" tableName="discountsCouponList" v-bind="list" row-key="id" stripe :vritualData="vritualData">
				<el-table-column type="selection" width="50"></el-table-column>
				<template #name="scope">
					<el-link :underline="false" type="primary" :href="`#/student/detail/${scope.row.studentId}`">{{ scope.row.name
					}}</el-link>
				</template>
				<el-table-column label="操作" width="255" fixed="right" align="center">
					<template #default="scope">
						<el-button type="primary" plain size="small" @click="deleteDetail(scope.row)">停用</el-button>
						<el-button type="primary" plain size="small" @click="copyDetail(scope.row)">编辑</el-button>
						<el-button plain size="small" @click="editDetail(scope.row)">查看业务范围</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>

		<div>
			<el-dialog
  		  v-model="dialogVisible"
  		  title="业务范围"
  		  width="800px"
  		>
				<div>
					<el-table :data="tableData" border stripe style="width: 100%">
  				  <el-table-column prop="areaName" label="片区" align="center"/>
  				  <el-table-column prop="schoolName" label="校区" align="center"/>
  				  <el-table-column prop="courseType" label="课程类型" align="center"/>
  				  <el-table-column prop="subject" label="学科分类" align="center"/>
  				  <el-table-column prop="isSetMeal" label="是否套餐" align="center"/>
  				  <el-table-column prop="courseName" label="课程名称" align="center"/>
  				</el-table>
				</div>
			</el-dialog>
		</div>
	</el-container>
</template>
<script>
import AddClass from "./addCoupon/index.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { formColumn, column } from "./date";
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.student.class,
				params: {},
				column,
			},
			drawer: {
				show_add: false,
			},
			vritualData: [
				{
					1: '美甲优惠',
					a: '启用',
					s: '直减',
					d: '2022051215153746',
					f: '已发布',
					g: '2022-05-12-2022-05-15',
					h: '--',
					j: '新生',
					k: '陈大厨',
					l: '2022-04-24 15:21:23',
					z: '--',
				},
				{
					1: '纹绣优惠',
					a: '启用',
					s: '直减',
					d: '2022051215124865',
					f: '已发布',
					g: '2022-02-124-2022-03-23',
					h: '--',
					j: '新生',
					k: '酒大仙',
					l: '2022-03-24 16:21:23',
					z: '--',
				},
				{
					1: '纹绣优惠',
					a: '停用',
					s: '直减',
					d: '2022051215124865',
					f: '未发布',
					g: '2022-02-124-2022-03-23',
					h: '--',
					j: '老生',
					k: '扫把星',
					l: '2022-03-24 16:21:23',
					z: '--',
				}
			],
			dialogVisible: false,
			tableData: [
				{areaName: "大湾区", schoolName: "广州", courseType: "123", subject: "", isSetMeal: "",  courseName: "一班"}
			]
		}
	},
	components: {
		SearchForm,
		AddClass,
	},
	methods: {
		search(searchParams) {
			const params = Object.assign({}, this.list.params, searchParams);
			this.$refs.table.reload(params);
		},
		addStudent() {
			this.visible = true;
		},
		deleteStudentHandle(row) {
			const tableSelection = this.$refs.table.tableSelection;
			if (tableSelection.length > 0) {
				ElMessageBox.confirm('确认删除?','信息',
    		 	{
    		 	  confirmButtonText: '确定',
    		 	  cancelButtonText: '取消',
						buttonSize: "small"
    		 	}
 				).then(() => {
				})
    		.catch(() => {})
			}else{
				ElMessage({
					message: "请选择优惠券",
					type: "warning"
				})
			}
		},
		deleteDetail(row) {
			console.log(row, "我是停用");
			ElMessageBox.confirm('确定要停用该优惠券?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				buttonSize: "default"
			}).then(() => { })
		},
		copyDetail(row) {
			console.log(row, "我是编辑");
			this.$router.push({
				path: ""
			})
		},

		editDetail(row) {
			console.log(row, "我是查看优惠班级");
			this.dialogVisible = true
		},
	},
}
</script>
<style lang="scss" scoped>
.mr10 {
	margin-right: 10px;
}
</style>